import React, { Component } from 'react';
import { TabBar } from 'antd-mobile';
import './style/index.css'
import { connect } from 'react-redux';
import { indexAction } from '../action';
import Coupon from '../component/Coupon'
import Home from './home';
import HangQing from './hangQing';
import CeLue from './celue';
import WoDe from './wode';


class _Index extends Component {

    constructor(props) {
        super(props);
        this.state = {
            selectedTab: this.props.tabIndex,
            popupWindow: true,
        }
    }


    closePopupWindow = () => {
        window.popupWindow = false;
        this.setState({
            popupWindow: false
        });
    }

    componentWillUnmount() {
        this.props.indexAction({
            type: 'tabIndex',
            data: this.state.selectedTab
        });
    }


    render() {
        return (
            <div className='index'  >
                <TabBar
                    unselectedTintColor="#CCCCCC"
                    tintColor="#FF9806"
                    barTintColor="#FFFFFF"
                >
                    <TabBar.Item
                        title="首页"
                        key="home"
                        icon={<img alt='' src={require('./img/index/home2.png')} height='22px' width='22px' />}

                        selectedIcon={<img alt='' src={require('./img/index/home.png')} height='22px' width='22px' />}

                        selected={this.state.selectedTab === 'home'}
                        onPress={() => {
                            this.setState({
                                selectedTab: 'home',
                            });
                        }}
                        data-seed="logId"
                    >
                        <Home></Home>
                    </TabBar.Item>
                    <TabBar.Item
                        icon={<img alt='' src={require('./img/index/hangqing.png')} height='22px' width='22px' />}
                        selectedIcon={<img alt='' src={require('./img/index/peizi.png')} height='22px' width='22px' />}
                        title="策略"
                        key="celue"
                        selected={this.state.selectedTab === 'celue'}
                        onPress={() => {
                            this.setState({
                                selectedTab: 'celue',
                            });
                        }}
                    >
                        <CeLue></CeLue>
                    </TabBar.Item>
                    <TabBar.Item
                        icon={<img alt='' src={require('./img/index/caopan.png')} height='22px' width='22px' />}
                        selectedIcon={<img alt='' src={require('./img/index/caopan2.png')} height='22px' width='22px' />}
                        title="行情"
                        key="hangqing"
                        selected={this.state.selectedTab === 'hangqing'}
                        onPress={() => {
                            this.setState({
                                selectedTab: 'hangqing',
                            });
                        }}
                    >
                        <HangQing></HangQing>
                    </TabBar.Item>
                    <TabBar.Item
                        icon={<img alt='' src={require('./img/index/wode.png')} height='22px' width='22px' />}
                        selectedIcon={<img alt='' src={require('./img/index/wode2.png')} height='22px' width='22px' />}
                        title="我的"
                        key="wode"
                        selected={this.state.selectedTab === 'wode'}
                        onPress={() => {
                            this.setState({
                                selectedTab: 'wode',
                            });
                        }}
                    >
                        <WoDe></WoDe>
                    </TabBar.Item>
                </TabBar>
                {
                    window.popupWindow && this.state.popupWindow ?
                        <div className='indexDialog'>
                            <div className='indexDialogZheZhao'>
                            </div>
                            <div className="indexDialogGuangGao">
                                <div className="indexDialogGuangGaoContent">
                                    <div className='indexDialogGuangGaoContent2'>
                                        <div className="newTop" ></div>
                                        <Coupon></Coupon>
                                        <Coupon></Coupon>
                                        <div className='indexDialogGuangGaoContent3'>
                                            <img alt='' src={require('./img/dialog/submit.png')} />
                                        </div>
                                    </div>
                                    <img alt='' className="closeIcon" onClick={this.closePopupWindow} src={require('./img/dialog/close.png')} />

                                </div>
                            </div>
                        </div>
                        : null
                }
            </div>
        );
    }
}

function mapStateToProps(state) {
    return {
        ...state.indexReducer
    };
}


export default connect(mapStateToProps, { indexAction })(_Index);;
